<!--  -->
<template>
  <div class='cityConfigArea'>
    <div class="cityConfigArea_circleLine">
      <span class="cityConfigArea_alertMess">城市-环线</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="circleLineAdd">新增</Button>
      <div>
        <Table ref="TableHeight" class="table" max-height="300" :columns="columns2"
          :data="data2"></Table>
        <span v-for="item in circleLineList" :key="item.loopLineId"
          class="cityConfigArea_circleLine_span">{{item.loopLineName}}</span>
      </div>
    </div>
    <div>
      <span class="cityConfigArea_alertMess">城市-地铁-地铁站</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="checkMoudle = true">新增</Button>
    </div>
    <Table ref="TableHeight" class="table" :max-height="onresizeHeight" :columns="columns1"
      :data="data1"></Table>
    <!-- 分页 -->
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount">
        当前第 {{pageData.page}} 页，
        当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第
        {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}}
        条，
        共 {{pageData.total}} 条
      </div>
      <Page :current="pageData.page" :total="pageData.total-0"
        :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun"
        @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer />
    </div>
    <!--新增板块 -->
    <Modal v-model="checkMoudle" title="新增地铁站" footer-hide width="500px">
      <div>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"
          :label-width="120">
          <FormItem label="线路" prop="metroName">
            <Input type="text" v-model="formValidate.metroName" placeholder="请输入线路"
              class="cityConfigArea_moudle_select"></Input>
          </FormItem>
          <FormItem label="地铁站" prop="loopLineList">
            <div v-for="(item,index) in formValidate.loopLineList" :key="index"
              class="cityConfigArea_moudle_inputList">
              <Input type="text" v-model="item.loopLineName" placeholder="请输入模块名字"
                class="cityConfigArea_moudle_select"></Input>
              <Icon v-if="index == 0" size="24" class="cityConfigArea_moudle_icon"
                color="#4fe669" @click="formValidate.loopLineList.push({loopLineName:''})"
                type="md-add-circle" />
              <Icon v-else color="red" size="24" class="cityConfigArea_moudle_icon"
                type="md-close-circle" @click="formValidate.loopLineList.splice(index,1)" />
            </div>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="checkMoudle = false">取消</Button>
            <Button type="primary" @click="addAreaSubmit('formValidate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!--编辑 -->
    <Modal :width="400" v-model="currentDateDetail" title="地铁站点编辑" :mask-closable='false'
      :footer-hide='true' @on-cancel="customSortModal = false">
      <div>
        <Form ref="currentDateForEdit" :model="currentDate" :rules="ruleValidateDetail"
          :label-width="120">
          <FormItem label="线路" prop="metroName">
            <Input type="text" v-model="currentDate.metroName" placeholder="请输入线路"
              class="circleLineModal_select"></Input>
          </FormItem>
          <FormItem label="地铁站" prop="stationName">
            <Input type="text" v-model="currentDate.stationName" placeholder="请输入地铁站"
              class="circleLineModal_select"></Input>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="currentDateDetail = false">取消</Button>
            <Button type="primary" @click="editAreaSubmit('currentDateForEdit')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 城市环线编辑 -->
    <Modal v-model="circleLineModal" width="400" title="城市-环线增加/编辑" :footer-hide='true'>
      <div>
        <Form ref="currentDate" :model="circleLineMess" :label-width="120">
          <FormItem label="环线:">
            <div v-for="item in circleLineMess.loopLineList" :key='item.id'>
              <Input type="text" v-model="item.loopLineName" placeholder="请输入环线名字"
                class="circleLineModal_select"></Input>
            </div>
          </FormItem>
          <Button type="primary" v-if="circleLineMess.type !== 'edit'"
            @click="circleLineMess.loopLineList.push({loopLineName:''})">新增</Button>
          <FormItem class="cityList_moudle_footer circleLineModal_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="circleLineModal = false">取消</Button>
            <Button type="primary" @click="circleLineSubmit(circleLineMess.type)">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'
  export default {
    components: { draggable },
    data() {
      const ruleValidateCodeList = (rule, data, callback) => {
        let flag = false
        data.forEach((item) => {
          item.loopLineName && (flag = true)
        })
        if (!flag) return callback('请输入至少一个地铁站的名称')
        callback()
      }
      return {
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 30, 50],
        },
        formValidate: {
          metroName: '',
          loopLineList: [{ loopLineName: '' }],
        },
        ruleValidate: {
          metroName: [
            { required: true, message: '请填写地铁线路', trigger: 'blur' },
          ],
          loopLineList: [{ validator: ruleValidateCodeList, trigger: 'blur' }],
        },
        parentCodeList: [],
        uploadList: [],
        onresizeHeight: 0,
        city: '上海',
        checkMoudle: false,
        columns1: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row._index + 1)
          },
        },
        {
          title: '城市',
          key: 'cityName',
          align: 'center',
        },
        {
          title: '线路',
          key: 'metroName',
          align: 'center',
        },
        {
          title: '地铁站',
          key: 'stationName',
          align: 'center',
        },
        {
          title: '操作',
          key: 'address',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                  },
                  style: {
                    color: '#02b0f0',
                  },
                  on: {
                    click: () => {
                      this.toEdit(params.row)
                    },
                  },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                  },
                  style: {
                    color: '#02b0f0',
                  },
                  on: {
                    click: () => {
                      this.toDelete(params.row)
                    },
                  },
                },
                '删除'
              ),
            ])
          },
        }, ],
        columns2: [
        {
          title: '序号',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row._index + 1)
          },
        },
        {
          title: '城市',
          key: 'cityName',
          align: 'center',
        },
        {
          title: '环线',
          key: 'loopLineName',
          align: 'center',
        },
        {
          title: '操作',
          key: 'address',
          fixed: 'right',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                  },
                  style: {
                    color: '#02b0f0',
                  },
                  on: {
                    click: () => {
                      this.toEditLoop(params.row)
                    },
                  },
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                  },
                  style: {
                    color: '#02b0f0',
                  },
                  on: {
                    click: () => {
                      this.toDeleteLoop(params.row)
                    },
                  },
                },
                '删除'
              ),
            ])
          },
        }, ],
        data2: [],
        data1: [],
        importObj: {
          modalShow: false,
          title: '城市-区域-板块',
        },
        updateObj: {
          grid_importfile: 'grid_importfile',
          appName: 'web_back',
          appVersion: '1.0',
          code: '',
          api: '',
        },
        code: '',
        currentDate: {},
        currentDateDetail: false,
        ruleValidateDetail: {
          metroName: [{ required: true, message: '请填写线路', trigger: 'blur' }],
          stationName: [
            { required: true, message: '请填写地铁站', trigger: 'blur' },
          ],
        },
        deleteModal: false,
        circleLineModal: false,
        circleLineList: [],
        circleLineMess: {
          loopLineList: [{ loopLineName: '' }],
        },
      }
    },
    computed: {},
    watch: {},
    methods: {
      //增加地铁站批量
      addAreaSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log(this.formValidate)
            let { loopLineList, metroName } = this.formValidate
            console.log(loopLineList)
            let userMess = this.$tool.getStorage('userMess'),
              mess = JSON.parse(userMess),
              { appId, userId, workNo } = mess
            loopLineList.map((item) => {
              item.appId = appId
              item.cityCode = this.cityCode;
              (item.cityName = this.cityName),
              (item.metroName = metroName),
              (item.stationName = item.loopLineName)
            })
            console.log(loopLineList)
            let params = {
              metroStationList: loopLineList,
            }
            console.log(params)
            generalConfiguration.mettroAdd(params).then((res) => {
              this.$Message.success('地铁站点增加成功')
              this.$refs[name].resetFields()
              this.formValidate = {
                metroName: '',
                loopLineList: [{ loopLineName: '' }],
              }
              this.checkMoudle = false
              this.getmetroList()
            })
          }
        })
      },
      //获取环线列表
      getLineList() {
        this.code = this.$route.query.code
        let { page, row } = this.pageData,
          params = { page, row, cityCode: this.code }
        generalConfiguration.loopPages(params).then((res) => {
          res.list.map((item) => (item.cityName = this.$route.query.title))
          console.log('获取环线列表', res)
          this.data2 = res.list
        })
      },
      //获取地铁类表
      getmetroList() {
        let { page, rows } = this.pageData
        generalConfiguration.mettroList({ page, rows, cityCode: this.$route.query.code }).then(
          (res) => {
            res.list.map((item) => (item.cityName = this.$route.query.title))
            this.data1 = res.list
            this.pageData.total = res.total
            console.log('获取地铁列表', res)
          }
        )
      },
      //自定义排序
      selfSort() {},
      //点击编辑按钮
      toEdit(mess) {
        console.log(mess)
        this.currentDate = JSON.parse(JSON.stringify(mess))
        this.currentDateDetail = true
      },
      //编辑确定
      editAreaSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let { metroId, metroName, metroStationId, stationName } =
            this.currentDate
            console.log(metroId, metroName, metroStationId, stationName)
            let params = {
              cityCode: this.cityCode,
              metroId,
              metroName,
              metroStationId,
              stationName,
            }
            generalConfiguration.mettroUpdate(params).then((res) => {
              this.$Message.success('修改成功')
              this.currentDateDetail = false
              this.getmetroList()
            })
          }
        })
      },
      //删除地铁站
      toDelete(mess) {
        this.$Modal.confirm({
          title: '删除',
          content: `你确认${mess.stationName}地铁站删除么?`,
          closable: true,
          onOk: () => {
            generalConfiguration.mettroDelete({ metroStationId: mess.metroStationId })
              .then(
                (res) => {
                  console.log('删除成功')
                  this.$Message.success('删除成功')
                  this.getmetroList()
                }
              )
          },
          onCancel: () => {},
        })
      },
      //删除环线
      toDeleteLoop(mess) {
        this.$Modal.confirm({
          title: '删除',
          content: `你确认${mess.loopLineName}环线删除么？`,
          closable: true,
          onOk: () => {
            generalConfiguration.loopDelete({ loopLineId: mess.loopLineId }).then((
              res) => {
              console.log('删除成功')
              this.$Message.success('删除成功')
              this.getLineList()
            })
          },
          onCancel: () => {},
        })
      },
      //点击环线新增按钮
      circleLineAdd() {
        this.circleLineMess.loopLineList = [{ loopLineName: '' }]
        this.circleLineMess.type = 'add'
        this.circleLineModal = true
      },
      //点击环线编辑按钮
      toEditLoop(mess) {
        let newObj = this.$tool.deepClone(mess)
        this.circleLineMess.loopLineList = [newObj]
        this.circleLineMess.type = 'edit'
        this.circleLineModal = true
        console.log(mess)
      },
      //环线新增确认按钮
      circleLineSubmit() {
        let { loopLineList, type } = this.circleLineMess
        let arr = loopLineList.filter((item) => item.loopLineName)
        if (arr.length < 1) return this.$Message.error('请完善信息')
        let userMess = this.$tool.getStorage('userMess'),
          mess = JSON.parse(userMess),
          { appId, userId, workNo } = mess
        if (type == 'edit') {
          console.log(arr[0])
          let { loopLineId, loopLineName } = arr[0]
          generalConfiguration.loopUpdate({ loopLineId, loopLineName }).then((res) => {
            this.$Message.success('修改成功')
            this.getLineList()
            this.circleLineModal = false
          })
        } else {
          arr.forEach((item) => {
            item.cityCode = this.code
            item.appId = appId
          })
          console.log(arr)
          generalConfiguration.loopAdd({ loopLineList: arr }).then((res) => {
            console.log('环线增加', res)
            this.$Message.success('添加成功')
            this.getLineList()
            this.circleLineMess.loopLineList = [{ loopLineName: '' }]
            this.circleLineModal = false
          })
        }
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        if (page != 1 || this.pageData.page != 1) {
          this.pageData.page = page
          this.getmetroList()
        }
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        console.log('分页 每页条数改变事件')
        this.pageData.rows = rows
        this.pageData.page = 1
        this.getmetroList()
      },
    },
    beforeCreate() {
      let { code, title } = this.$route.query
      this.cityCode = code
      this.cityName = title
    },
    created() {
      this.getLineList()
      this.getmetroList()
    },
    mounted() {},
  }
</script>
<style lang='scss' scoped>
  .cityConfigArea {
    &_circleLine {
      // box-shadow: 0px 0px 6px 0px rgba(116,119,121,0.2);
      padding: 8px;
      margin: 20px 0;

      // background-color: #f8f8f9;
      &_span {
        border: 1px solid #ccc;
        padding: 2px 12px;
        margin-right: 8px;
        border-radius: 4px;
        margin-bottom: 9px;
        display: inline-block;
      }
    }

    &_alertMess {
      font-size: 16px;
      font-weight: 700;
      float: left;
      margin-top: 6px;

      .red {
        color: red;
      }
    }

    &_alertMessButton {
      margin: 0 8px 25px 8px;
    }

    &_moudle_select {
      width: 306px;
      margin-right: 10px;
    }

    &_moudle_inputList {
      margin-bottom: 10px;
    }

    &_moudle_icon {
      vertical-align: text-top;
    }

    .pagePublicStyle {
      text-align: right;
      padding: 14px 0;
      margin-right: 30px;
    }

    .totalCount {
      float: left;
      line-height: 34px;
      padding-left: 20px;
    }
  }

  .cityList_moudle_footer {
    ::v-deep .ivu-form-item-content {
      text-align: right;
      margin-right: 42px;
    }
  }

  .customSortStyle {
    text-align: left;

    .customSortHead,
    .customSortBody {
      li {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #eeeeee;

        div {
          flex: 1;
          text-align: center;

          button {
            margin: 0px 6px;
          }
        }

        div:first-child {
          flex: 0.4;
        }
      }
    }

    .customSortHead li {
      padding-bottom: 10px;
    }

    .customSortBody li {
      padding: 10px 0;
      line-height: 31px;
    }

    .customSortBody {
      max-height: 400px;
      overflow-y: auto;
    }

    .customSortFoot {
      padding-top: 14px;
      text-align: center;
    }
  }

  .cityConfigArea_cancelButton {
    margin-right: 6px;
  }

  .circleLineModal_select {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .circleLineModal_footer {
    border-top: 1px solid #ccc;
    margin-top: 6px;
    padding-top: 8px;
  }
</style>